<template>
  <ListPage ref="page" :query="query" :api="getComplaintSuggestionList">
    <template #search="{ page, hiddenColumns }">
      <PageSearch ref="search" :query="query" :page="page" has-box @search="() => ($refs.page as any).getData()">
        <template #auth>

          <ElButton type="success" @click="openZdycx">自定义查询</ElButton>
          <ElButton type="success" @click="openDialog">添加投诉记录</ElButton>
          <!-- 弹窗容器 -->
          <el-dialog v-model="dialogVisible" title="添加投诉记录" style="width: 80%; height: 50%">
            <!-- 使用自定义组件 -->
            <tjtsjl v-if="dialogVisible" @cancel="closeDialog" @submit="handleSubmit"/>
          </el-dialog>
        </template>
        <template #input="{}">
          <SearchInput v-model="query.keyword" placeholder="登录时间/投诉渠道/投诉问题发生时间" :data="query"
                       :hidden-columns="(hiddenColumns as any)" @trigger="(e) => ($refs.search as any).trigger(e)"
                       @search="() => ($refs.page as any).getData()"
                       @change-column="(prop) => ($refs.page as any).changeColumn(prop)"></SearchInput>
        </template>
      </PageSearch>
    </template>

    <template #table="{ data, hiddenColumns }">
      <ListTable :data="data" :hidden-columns="(hiddenColumns as any)" @edit-complaint="onEditComplaint">
      </ListTable>
    </template>

    <template #pagination="{ page, total }">
      <PagePagination :page="page" :total="total" @changePage="(v) => ($refs.page as any).changePage(v)">
      </PagePagination>
    </template>
  </ListPage>
  <CustomizeQuery :zdycxObj="zdycxObj" moduleName="投诉建议" @query-data="queryData"></CustomizeQuery>
</template>

<script setup lang="ts">

import {ref, reactive} from 'vue'
import ListPage from '@/components/list-page/ListPage.vue'
import {getComplaintSuggestionList} from '../api'
import ListTable from './ListTable.vue'
import PageSearch from '@/components/list-page/PageSearch.vue'
import SearchInput from '@/components/list-page/SearchInput.vue'
import {useAuth} from '@/utils/auth'
import {editDialog} from '../dialog/complaintSuggestionDialog'
import PagePagination from '@/components/list-page/PagePagination.vue'
import Tjtsjl from "@/views/menus/n-customer-complaint-registration-new/components/Tjtsjl.vue";
import CustomizeQuery from "@/views/menus/n-ykf-customize-query/components/index.vue";

const page = ref()

const query = reactive({
  keyword: '',
  customerName: '',
  customizeQueryCondition: [],
})

const auth = useAuth()

const zdycxObj = reactive({
  isShow: false,
})

const openZdycx = async () => {
  zdycxObj.isShow = true;
}

const queryData = async (customizeQueryCondition) => {
  zdycxObj.isShow = false;
  query.customizeQueryCondition = customizeQueryCondition;
  page.value?.getData()
}

const dialogVisible = ref(false)

const openDialog = async () => {
  dialogVisible.value = true
}
const closeDialog = () => {
  dialogVisible.value = false
}
const handleSubmit = () => {
  closeDialog()
}

const onEditComplaint = async (row) => {
  await editDialog.title('编辑投诉记录').open({row})
  // 刷新数据
  page.value && page.value.getData();
}
</script>